<template>
  <div class="rolemain flex" v-loading="loading">
    <div class="main-left p-15">
      <div
        class="fun_item f-14 c_text2 commhover"
        v-for="(item, index) in treedata"
        :key="index"
        :class="{ active: active == item.id }"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="main-content">
      <el-tree
        ref="menu"
        :key="menukey"
        :data="treedata"
        show-checkbox
        default-expand-all
        node-key="id"
        :props="defaultProps"
        :expand-on-click-node='false'
        @check-change='checkChange'
        empty-text="加载中，请稍候"
      >
      </el-tree>
      <!-- <div class="setblock p-20" v-for="(item, index) in treedata" :key="index">
        <div class="setname f-16 c_text2 fw-6 mb-16">{{ item.name }}</div>
        <select-item
          v-for="(list, index2) in item.children"
          :key="index2"
          :item="list"
        />
      </div> -->
    </div>

    <div v-if="isChecked" class="mainbottom flexcenter">
      <el-button size="small" @click="cancle">取消</el-button>
      <el-button type="primary" size="small" :loading='subloading' @click="updataRole">保存</el-button>
    </div>
  </div>
</template>
<script>
import { getRoleGnList, getRoleItem, updateRole } from "@/api/role";
import SelectItem from "./SelectItem.vue";
export default {
  data() {
    return {
      rowItem:null,
      funcitem: [
        { name: "引流获客", id: 1 },
        { name: "客户接待", id: 2 },
        { name: "客户运营", id: 3 },
        { name: "智能运营", id: 4 },
        { name: "营销服务", id: 5 },
        { name: "社群运营", id: 6 },
      ],
      active: "",
      checkData: [],
      treedata: [
        // {
        //   label: "引流获客",
        //   id: 1,
        //   list: [
        //     {
        //       label: "主动加好友",
        //       id: 2,
        //       checked: true,
        //     },
        //     {
        //       label: "群活码",
        //       id: 3,
        //       checked: false,
        //     },
        //     {
        //       label: "接受新客户",
        //       id: 4,
        //       checked: false,
        //       children: [
        //         {
        //           label: "接受频率/条件设置",
        //           id: 5,
        //           checked: false,
        //         },
        //       ],
        //     },
        //   ],
        // },
        // {
        //   label: "客户接待",
        //   id: 6,
        //   list: [
        //     {
        //       label: "在线聊天",
        //       id: 7,
        //       checked: false,
        //       children: [
        //         {
        //           label: "侧边栏-客户资料-手机",
        //           id: 8,
        //           checked: false,
        //         },
        //       ],
        //     },
        //     {
        //       label: "客服分发",
        //       id: 9,
        //       checked: false,
        //       children: [
        //         {
        //           label: "聊天配置",
        //           id: 10,
        //           checked: false,
        //         },
        //         {
        //           label: "侧边栏-客户资料-手机",
        //           id: 11,
        //           checked: false,
        //         },
        //       ],
        //     },
        //   ],
        // },
        // {
        //   label: "引流获客",
        //   id: 12,
        //   list: [
        //     {
        //       label: "主动加好友",
        //       id: 13,
        //       checked: true,
        //     },
        //     {
        //       label: "群活码",
        //       id: 14,
        //       checked: false,
        //     },
        //     {
        //       label: "接受新客户",
        //       id: 15,
        //       checked: false,
        //       children: [
        //         {
        //           label: "接受频率/条件设置",
        //           id: 16,
        //           checked: false,
        //         },
        //       ],
        //     },
        //   ],
        // },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      subloading:false,
      isChecked:false,
      menukey:'',
    };
  },
  props: {
    rowid: {
      default: "",
    },
  },
  watch: {
    rowid: {
      handler(val) {
        if(val){
          this.menukey = Date.now()
          this.getDetail();
        }
      },
      immediate: true,
      deep: true
    },
  },
  components: {
    SelectItem,
  },
  created() {
    this.getList();
  },
  methods: {
    getDetail() {
      console.log('this.rowid:', this.rowid)
      getRoleItem(this.rowid).then((res) => {
        this.rowItem = res.data
        this.checkData = res.data.roleModel.split(",");
        this.checkData.forEach((v) => {
          this.$nextTick(() => {
            this.$refs.menu.setChecked(v, true, false)
          });
        });
      });
    },

    getList() {
      this.loading = true;
      getRoleGnList()
        .then((res) => {
          let rows = res.rows
            .map((item) => ({ ...item, checked: false }))
            .filter((item) => item.parentId !== -1);
          this.treedata = this.handleTree(rows);
          // this.active = this.treedata[0].id;
          console.log("this.treedata:", this.treedata);
          this.loading = false;
          if (this.rowid) {
            this.getDetail();
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },

    checkChange(){
      this.isChecked = true
    },

    cancle(){
      this.isChecked = false
      this.checkData.forEach((v) => {
          this.$nextTick(() => {
            this.$refs.menu.setChecked(v, true, false);
          });
        });
    },

    updataRole(){
      this.subloading = true;
      let from = {
        id:this.rowItem.id,
        roleName:this.rowItem.roleName,
        roleModel:this.rowItem.roleModel
      }
      from.roleModel = this.getMenuAllCheckedKeys().join(",")
      updateRole(from).then(()=>{
        this.$message.success("保存成功");
        this.subloading = false;
        this.isChecked = false
        this.getDetail()
      }).catch(()=>{
        this.subloading = false;
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.rolemain {
  height: calc(100% - 64px);
  position: relative;
}
.main-left {
  width: 140px;
  height: 100%;
  overflow: auto;
  border-right: 1px solid #e0e0e0;
}
.fun_item {
  width: 108px;
  height: 32px;
  line-height: 32px;
  padding: 0 0 0 12px;
  border-radius: 4px;
  margin-bottom: 4px;
  &.active {
    background-color: #ebf2ff;
  }
}
.main-content {
  padding: 0 20px 60px;
  width: calc(100% - 140px);
  height: 100%;
  overflow-y: auto;
}
.setblock {
  border-bottom: 1px solid #f5f5f5;
}
.mainbottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0 -3px 5px 0 rgba(0, 0, 0, 0.03);
  text-align: center;
  padding: 16px 0;
}
::v-deep .el-tree{
  color: rgba(0,0,0,.85);
  &>.el-tree-node{
    padding: 20px 10px!important;
    border-bottom: 1px solid #f5f5f5;

    &>.el-tree-node__content{
      border-radius: 4px;
      &:hover,&:active,&:focus,&:visited{
        background-color: transparent;
      }
      .el-icon-caret-right{
        display: none;
      }
      .el-checkbox{
        display: none;
      }
      .el-tree-node__label{
        font-size: 16px;
        font-weight: 600;
        color: rgba(0,0,0,.85);
        padding-left: 15px;
        
      }
    }
  }
}
::v-deep .el-icon-caret-right{
  // display: none;
  opacity: 0;
}
::v-deep .el-tree-node__content{
  margin-bottom: 12px;
  height: 34px;
}
</style>